﻿<!--Breadcrumb Start-->
<div class="breadcrumb-container">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="breadcrumbs">
                    <ul>
                        <li class="home"><a href="{:url('index/index')}">Home</a><span>/ </span></li>
                        <li><strong>Shop Grid</strong></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End of Breadcrumb-->
<!--Banner Imgae Area Start-->
<div class="banner-image-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="category-image"><img alt="women" src="/img/banner/15.jpg"></div>
            </div>
        </div>
    </div>
</div>
<!--End of Banner Imgae Area-->
<!--Shop Main Area Start-->
<div class="shop-main-area">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="sidebar-content">
                    <div class="section-title"><h2>Category</h2></div>
                    <div class="sidebar-category-list">
                        <ul>
                            <li><a href="{:url('goods/index')}">All</a></li>
                            {volist name="categoryList" id="vo"  }
                            <li><a href="{:url('goods/index', ['cate' => $vo.id])}">{$vo.name}</a>
                                {if $vo.childlist}
                                <ul>
                                    {volist name="vo.childlist" id="vo1"}
                                    <li><a href="{:url('goods/index', ['cate' => $vo1.id])}">{$vo1.name}</a></li>
                                    {/volist}
                                </ul>
                                {/if}
                            </li>
                            {/volist}
                        </ul>
                    </div>
                </div>
                <div class="sidebar-content">
                    <div class="section-title no-margin"><h2>Popular Type</h2></div>
                    <div class="popular-tags">
                        <ul class="tag-list">
                            <li><a href="{:url('goods/index')}">All</a></li>
                            {volist name="typeList" id="vo"  }
                            <li><a href="{:url('goods/index', ['type' => $vo.id])}">{$vo.name}</a></li>
                            {/volist}
                        </ul>
                    </div>
                </div>
                <div class="sidebar-content">
                    <div class="banner-box">
                        <a href="#"><img src="/img/banner/16.jpg" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="shop-item-filter">
                    <div class="shop-tab clearfix">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs navbar-left" role="tablist">
                            <li role="presentation" class="active"><a href="#grid" class="grid-view" aria-controls="grid" role="tab" data-toggle="tab">Grid</a></li>
                        </ul>
                        <p class="page floatright">Goods Total: {$goods->total()}</p>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="grid">
                        <div class="row">
                            {volist name="goods" id="vo"  }
                            <div class="col-md-4 col-sm-4">
                                <div class="single-product-item">
                                    {if $vo.top_switch == 1}
                                    <div class="sale-product-label"><span>sale</span></div>
                                    {else}
                                    <div class="new-product-label"><span>new</span></div>
                                    {/if}
                                    <div class="single-product clearfix">
                                        <a href="{:url('goods/detail',['id' => $vo.id])}">
                                                    <span class="product-image">
                                                        <img src="{$vo.image}" alt="">
                                                    </span>
                                            <span class="product-image hover-image">
                                                        <img src="{$vo.image}" alt="">
                                                    </span>
                                        </a>
                                    </div>
                                    <h2 class="single-product-name"><a href="{:url('goods/detail',['id' => $vo.id])}" title="{$vo.name}" >{$vo.name}</a></h2>
                                    <div class="price-box">
                                        <p class="old-price">
                                            <span class="price">Rs.{$vo.mktprice}</span>
                                        </p>
                                        <p class="special-price">
                                            <span class="price">Rs.{$vo.price}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="pagination-content">
                            <div class="pagination-button">
                                {$page}
                                <!--<ul class="pagination">
                                    <li class="current"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#"><i class="fa fa-caret-right"></i></a></li>
                                </ul>
                                <span><strong>Page: </strong></span>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End of Shop Main Area-->
<style>
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 17px 0;
        border-radius: 3px;
    }
    .pagination > li {
        display: inline;
    }
    .pagination > li > a,
    .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-decoration: none;
        color: #2c3e50;
        background-color: #fff;
        border: 1px solid #ddd;
        margin-left: -1px;
    }
    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
        margin-left: 0;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }
    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }
    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        z-index: 2;
        color: #11181f;
        background-color: #eeeeee;
        border-color: #ddd;
    }
    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 3;
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
        cursor: default;
    }
    .pagination > .disabled > span,
    .pagination > .disabled > span:hover,
    .pagination > .disabled > span:focus,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #777777;
        background-color: #fff;
        border-color: #ddd;
        cursor: not-allowed;
    }
    .pagination-lg > li > a,
    .pagination-lg > li > span {
        padding: 10px 16px;
        font-size: 15px;
        line-height: 1.3333333;
    }
    .pagination-lg > li:first-child > a,
    .pagination-lg > li:first-child > span {
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }
    .pagination-lg > li:last-child > a,
    .pagination-lg > li:last-child > span {
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }
    .pagination-sm > li > a,
    .pagination-sm > li > span {
        padding: 5px 10px;
        font-size: 11px;
        line-height: 1.5;
    }
    .pagination-sm > li:first-child > a,
    .pagination-sm > li:first-child > span {
        border-bottom-left-radius: 2px;
        border-top-left-radius: 2px;
    }
    .pagination-sm > li:last-child > a,
    .pagination-sm > li:last-child > span {
        border-bottom-right-radius: 2px;
        border-top-right-radius: 2px;
    }
    .pager {
        padding-left: 0;
        margin: 17px 0;
        list-style: none;
        text-align: center;
    }
    .pager li {
        display: inline;
    }
    .pager li > a,
    .pager li > span {
        display: inline-block;
        padding: 5px 14px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
    }
    .pager li > a:hover,
    .pager li > a:focus {
        text-decoration: none;
        background-color: #eeeeee;
    }
    .pager .next > a,
    .pager .next > span {
        float: right;
    }
    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }
    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #777777;
        background-color: #fff;
        cursor: not-allowed;
    }
</style>